<template>
	<div class="container">
		<div class="content">
			<settingCell
				mode="pic"
				:value="userInfo.avatarPath"
				title="我的头像"
				@click.native="upAvatar"
			></settingCell>
			<settingCell title="昵称" :value="userInfo.nickname" @click.native="toEditNickname" :active="true"></settingCell>
			<div class="wrap">
				<div class="picker-warp">
					<span class="pic-tit">性别</span>
					<picker class="picker" mode="selector" @change="getSex" :value="pickerValue" range-key="label" :range="sexList" :class="current < 0 ? 'off' : ''">
						<div class="picker-desc">{{current > -1 ? select : '未知'}}</div>
					</picker>
				</div>
				<div class="icon"><image src="/static/icons/icon_arrow.png" alt="" /></div>
			</div>
		</div>
	</div>
</template>

<script>
import data from '@/js/my/setUserInfo/data.js';
import methods from '@/js/my/setUserInfo/methods.js';
import { mapState } from 'vuex';
import navigationBar from '../../components/navigationBar.vue';
import settingCell from '@/components/settingCell.vue';
import btn1 from '../../components/btn1.vue';
export default {
	data,
	methods,
	onLoad() {
	
	},
	onShow() {
		this.getUserInfo()
	},
	onHide() {},
	components: {
		navigationBar,
		settingCell,
		btn1
	},
	computed: {
		...mapState(['navigationBarHeight', 'userInfo'])
	}
};
</script>

<style scoped lang="scss">
@import '~@/style/my/setUserInfo.scss';
</style>
